<template>
  <div class="container">
    <!-- <Row :gutter="50">
      <i-Col span="6" style="min-width:61px;"> -->
    <Layout>
      <Sider
        hide-trigger
        style="margin-right: 50px; min-width: 240px; background-color: #fff"
      >
        <div class="left">
          <div class="head">
            <span>
              <Icon type="ios-list-box" size="16" />
              <span>设备分类</span>
              <Icon
                type="md-add"
                v-if="Validation.check(Resources.DEVICE_SORT_ADD)"
                @click="handleAdd"
                size="20"
              />
            </span>
          </div>
          <div class="tree-box">
            <div
              style="font-size: 14px; padding: 5px 10px"
              @click="getAllResult"
              :class="{ 'active-menu': AllSort === true }"
            >
              <Icon type="ios-folder-open-outline" size="20" />
              <label>全部</label>
            </div>
            <div
              class="tree-menu"
              v-for="(item, index) in bloc.sortPage.items"
              :key="item.id"
              :class="{
                'active-menu':
                  item.id === bloc.sortDevice.id && AllSort === false,
              }"
              @click="selectCurrentMenu(item, index)"
              @mouseenter="mouseMenuItem = item.id"
              @mouseleave="mouseMenuItem = -1"
            >
              <Icon type="ios-folder-open-outline" size="20" />
              <label>{{ item.sortName }}</label>
              <transition name="fade">
                <span style="width: 70px" v-if="mouseMenuItem === item.id">
                  <Icon
                    :type="icon"
                    v-for="icon in menuIcons"
                    :key="icon"
                    @click.stop="handleSort(icon, item)"
                    color="#666"
                    size="16"
                  />
                </span>
              </transition>
            </div>
          </div>
        </div>
      </Sider>
      <!-- </i-Col> -->

      <!-- <i-Col span="18"> -->
      <Content>
        <!-- <div class="nav"> -->
        <!-- </div> -->

        <div class="right">
          <ul>
            <Row>
              <div class="toolbar">
                <Button
                  type="primary"
                  icon="md-add"
                  style="margin-right: 30px"
                  @click="editItem()"
                  v-if="Validation.check(Resources.DEVICE_MODEL_ADD)"
                  >新增设备型号
                </Button>
                <!--              <Select v-model="bloc.model.id" style="width:200px;margin-right:5px" placeholder="设备型号">-->
                <!--                <Option v-for="item in bloc.modelPage.items" :key="item.id" :value="item.id">-->
                <!--                  {{ item.modelName }}-->
                <!--                </Option>-->
                <!--              </Select>-->
                <Input
                  placeholder="设备型号"
                  v-model="bloc.model.modelName"
                  style="width: 180px; margin-right: 10px"
                  type="text"
                />
                <CompanySelector
                  style="width: 300px; margin-right: 10px"
                  :tagCount="100"
                  :companyId="bloc.model.companyId"
                  @on-change="(value) => (bloc.model.companyId = value)"
                  v-if="Validation.isRootCompany"
                ></CompanySelector>
                <Button
                  icon="ios-search"
                  type="primary"
                  style="margin-left: 5px; margin-right: 5px"
                  @click="
                    bloc.getDeviceModel(
                      bloc.modelPage.pageIndex,
                      bloc.modelPage.pageSize,
                      'DESC',
                      bloc.sortDevice.id,
                      bloc.model.companyId,
                      bloc.model.modelName
                    )
                  "
                >
                  查询
                </Button>
                <Button icon="md-refresh" @click="reset">重置</Button>
              </div>
            </Row>
          </ul>
          <div>
            <Table
              border
              ref="selection"
              :columns="columns4"
              :data="bloc.modelPage.items"
            >
              <template slot-scope="{ row, index }" slot="action">
                <div style="white-space: nowrap">
                  <Button
                    size="small"
                    style="margin-left: 5px; margin-right: 5px"
                    @click="editItem(row)"
                    type="info"
                    v-if="Validation.check(Resources.DEVICE_MODEL_UPDATE)"
                  >
                    编辑
                  </Button>
                  <Button
                    size="small"
                    style="margin-left: 5px; margin-right: 5px"
                    @click="toRemoveItem(row)"
                    v-if="Validation.check(Resources.DEVICE_MODEL_DELETE)"
                    type="warning"
                    >删除
                  </Button>
                </div>
              </template>
              <slot name="footer" slot="footer">
                <Page
                  show-elevator
                  show-total
                  show-sizer
                  :total="bloc.modelPage.itemCount"
                  :current="bloc.modelPage.pageIndex"
                  :page-size="bloc.modelPage.pageSize"
                  :page-size-opts="[15, 30, 50, 100]"
                  @on-change="changepages"
                  @on-page-size-change="changepagesize"
                />
              </slot>
            </Table>
          </div>
        </div>
      </Content>
      <!-- </i-Col> -->

      <Modal
        title="新增设备分类"
        v-model="addCategory"
        class-name="vertical-center-modal"
        @on-cancel="cancel"
      >
        <p slot="header">
          <span>新增设备分类</span>
        </p>
        <div style="text-align: center">
          <Form
            ref="sort"
            :model="sort"
            :rules="ruleValidate"
            label-position="right"
            :label-width="100"
          >
            <FormItem label="设备分类:" prop="sortName" required>
              <Input v-model="sort.sortName" :maxlength="5" />
            </FormItem>
            <FormItem label="分类图标:" prop="sortIcon" required>
              <div class="demo-upload-list" v-for="(item, index) in fileList" :key="index">
                <template v-if="item.status === 'finished'">
                  <img :src="item.sortIcon">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item.sortIcon)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                  </div>
                </template>
                <template v-else>
                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
              </div>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :action="uploadAction"
                :max-size="50"
                :format="['jpg','png']"
                :headers="uploadHeaders"
                :on-format-error="handleFormatError1"
                :on-exceeded-size="handleMaxSize1"
                :on-success="handleSuccess"
                type="drag"
                :multiple="true"
                style="display: inline-block;width:58px;margin-left:15px"
              >
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
                <Modal title="View Image" v-model="visible">
                  <img :src="imgUrl" v-if="visible" style="width: 100%">
                </Modal>
              </Upload>
              <p style="margin-left: 15px">支持 JPG、PNG 格式，图片小于50k</p>
            </FormItem>

          </Form>
        </div>
        <div slot="footer">
          <AppButton
            ref="save"
            type="primary"
            @click="addSort(sort.sortName.trim(),sort.sortIcon)"
            >确定</AppButton
          >
        </div>
      </Modal>

      <Modal
        title="编辑设备分类"
        v-model="edit"
        class-name="vertical-center-modal"
        @on-cancel="cancel"
      >
        <p slot="header">
          <span>编辑设备分类</span>
        </p>
        <div style="text-align: center">
          <Form
            ref="editSort"
            :model="sort1"
            :rules="ruleValidate1"
            label-position="right"
            :label-width="100"
          >
            <!--            <FormItem>-->
            <!--              <Input v-model="sort.id"/>-->
            <!--            </FormItem>-->
            <FormItem label="分类名称:" prop="sortName1">
              <Input v-model="sort1.sortName1" :maxlength="5" />
            </FormItem>
            <FormItem label="分类图标:" prop="sortIcon1" required>
              <div class="demo-upload-list" v-for="(item, index) in fileList1" :key="index">
                <div v-if = "isNaN(item.sortIcon)">
                <template v-if="item.status === 'finished'">
                  <img :src="item.sortIcon">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView1(item.sortIcon)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove1(item)"></Icon>
                  </div>
                </template>
                <template v-else>
                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
              </div>
              </div>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :action="uploadAction"
                :max-size="50"
                :format="['jpg','png']"
                :headers="uploadHeaders"
                :on-format-error="handleFormatError1"
                :on-exceeded-size="handleMaxSize1"
                :on-success="handleSuccess1"
                type="drag"
                :multiple="true"
                style="display: inline-block;width:58px;margin-left:15px"
              >
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
                <Modal title="View Image" v-model="visible1">
                  <img :src="imgUrl1" v-if="visible1" style="width: 100%">
                </Modal>
              </Upload>
              <p style="margin-left: 15px">支持 JPG、PNG 格式，图片小于50k</p>
            </FormItem>

          </Form>
        </div>
<!--        <div slot="footer">-->
<!--          <AppButton-->
<!--            ref="edit"-->
<!--            type="primary"-->
<!--            @click="editSorts(sort1.id, sort1.sortName1.trim(),sort1.sortIcon1)"-->
<!--            >确定</AppButton-->
<!--          >-->
<!--        </div>-->
      </Modal>
    </Layout>
    <!-- </Row> -->
    <Modal
      title="确认提示"
      v-model="sortDelete"
      class-name="vertical-center-modal"
      @on-ok="handleDele(bloc.model.sortId)"
    >
      <div>
        <span>
          <h2>
            <Icon
              type="ios-help-circle-outline"
              size="48"
              color="rgba(255, 209, 145, 1)"
            />是否确定删除对应的记录
          </h2>
        </span>
        <p style="margin-left: 45px">是否确定删除对应的记录</p>
      </div>
    </Modal>

    <Modal
      title="确认提示"
      v-model="modelDelete"
      class-name="vertical-center-modal"
      @on-ok="modelDele(bloc.model.id)"
    >
      <div>
        <span>
          <h2>
            <Icon
              type="ios-help-circle-outline"
              size="48"
              color="rgba(255, 209, 145, 1)"
            />是否确定删除对应的记录
          </h2>
        </span>
        <p style="margin-left: 45px">是否确定删除对应的记录</p>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { DevicesBloc } from './ListBloc';
import { DeviceSort } from '@/base/model/DeviceSort';
import { DeviceModel } from '@/base/model/DeviceModel';
import { Route } from 'vue-router';
import CompanySelector from '@/component/CompanySelector.vue';
import { Validation } from '@/base/Validation';
import { Resources } from '@/base/Resources';
import { AppButton } from '@/type/AppButton';
import { store } from '@/store/Store';
import { baseUrl } from '@/base/Request';

const getColumns = (bloc: DevicesBloc) => [
  // {
  //   title: 'ID',
  //   key: 'id'
  // },
  {
    title: '所属品牌商',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: bloc.getCompanyName(params.row.companyId)
        }
      });
    },
    align: 'left',
    minWidth: 120,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '设备分类',
    width: 100,
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: bloc.getsortName(params.row.sortId)
        }
      });
    },
    align: 'left',
    tooltip: true
  },
  {
    title: '设备型号',
    key: 'modelName',
    align: 'left',
    minWidth: 80,
    tooltip: true
  },
  {
    title: '型号图标',
    key: 'modelIcon',
    align: 'left',
    width: 100,
    render: (h: any, params: any) => {
      return h('div', [
                h('img', {
                    domProps: {
                        src: params.row.modelIcon
                    },
                    style: {
                        width: '50px',
                        height: '50px'
                    }
                })
            ]);
    },
    tooltip: true
  },
    {
        title: '开发情况',
        key: 'isHide',
        align: 'left',
        width: 100,
        render: (h: any, params: any) => {
            return h('span', {
                domProps: {
                    innerText: params.row.isHide === 0 ? '已完成' : '开发中'
                }
            });
        },
        tooltip: true
    },
    {
        title: '海报',
        key: 'poster',
        align: 'left',
        width: 100,
        render: (h: any, params: any) => {
            if (params.row.poster === '') {
                return h('span', {
                    domProps: {
                        innerText: ''
                    }
                });
            } else {
                return h('div', [
                    h('img', {
                        domProps: {
                            src: params.row.poster
                        },
                        style: {
                            width: '50px',
                            height: '50px'
                        }
                    })
                ]);
            }
        },
        tooltip: true
    },
  // {
  //   title: '插件管理',
  //   key: 'isSoftware',
  //   width: 80,
  //   render: (h: any, params: any) => {
  //     return h('div', [
  //       h(
  //         'i-switch',
  //         {
  //           props: {
  //             type: 'primary',
  //             size: 'small',
  //             title: '状态',
  //             value: params.row.isSoftware
  //           },
  //           style: {
  //             marginRight: '2px',
  //             display: params.row.isSoftware === undefined ? 'none' : ''
  //           },
  //           on: {
  //             'on-change': value => {
  //               bloc.switchStatus3(params.row.id, value, params.index);
  //             }
  //           }
  //         },
  //         'selected'
  //       )
  //     ]);
  //   },
  //   tooltip: true
  // },
  // {
  //   title: '固件管理',
  //   key: 'isFirmware',
  //   width: 80,
  //   render: (h: any, params: any) => {
  //     return h('div', [
  //       h(
  //         'i-switch',
  //         {
  //           props: {
  //             type: 'primary',
  //             size: 'small',
  //             title: '状态',
  //             // disabled:(!params.row.status),
  //             value: params.row.isFirmware
  //           },
  //           style: {
  //             marginRight: '2px',
  //             display: params.row.isFirmware === undefined ? 'none' : ''
  //           },
  //           on: {
  //             'on-change': value => {
  //               bloc.switchStatus1(params.row.id, value, params.index);
  //             }
  //           }
  //         },
  //         'selected'
  //       )
  //     ]);
  //   },
  //   tooltip: true
  // },
  // {
  //   title: '自动模式管理',
  //   key: 'isSelfMotion',
  //   width: 110,
  //   render: (h: any, params: any) => {
  //     return h('div', [
  //       h(
  //         'i-switch',
  //         {
  //           props: {
  //             type: 'primary',
  //             size: 'small',
  //             title: '状态',
  //             // disabled:(!params.row.status),
  //             value: params.row.isSelfMotion
  //           },
  //           style: {
  //             marginRight: '2px',
  //             display: params.row.isSelfMotion === undefined ? 'none' : ''
  //           },
  //           on: {
  //             'on-change': value => {
  //               bloc.switchStatus2(params.row.id, value, params.index);
  //             }
  //           }
  //         },
  //         'selected'
  //       )
  //     ]);
  //   },
  //   tooltip: true
  // },
  {
    title: '操作',
    key: 'action',
    width: 47 * 2 + 20,
    align: 'left',
    slot: 'action',
    fixed: 'right'
  }
];
@Component({
  components: { CompanySelector }
})
export default class extends Vue {
  Validation = Validation;
  Resources = Resources;
  bloc: DevicesBloc = new DevicesBloc();
  readonly init!: number;
  AllSort: boolean = false;
  sortDelete: boolean = false;
  modelDelete: boolean = false;
  mouseMenuItem = -1;
  model: any = {
    companyId: 0,
    isFirmware: true,
    isSelfMotion: true,
    isSoftware: true,
    modelIcon: '',
    modelName: '',
    sortId: 0
  };
  columns4 = getColumns(this.bloc);

  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc.sortDevice.id = Number(vm.$route.query.sortId) || undefined;
      if (!vm.bloc.sortDevice.id) {
        vm.AllSort = true;
      }
      vm.initTreeList();
      vm.bloc.getCompanyList(vm.bloc.company.pageIndex, 500, 'DESC');
      // vm.bloc.getAllSort(1, 1000, 'DESC')
    });
  }

  ruleValidate = {
    sortName: [
      { required: true, message: '分类名称不能为空', trigger: 'blur' }
    ],
    sortIcon: [
      { required: true, message: '分类图标不能为空', trigger: 'change' }
      ]
  };
  ruleValidate1 = {
    sortName1: [
      { required: true, message: '分类名称不能为空', trigger: 'blur' }
    ],
    sortIcon1: [
      { required: true, message: '分类图标不能为空', trigger: 'change' }
      ]
  };

  getAllResult() {
    this.AllSort = true;
    this.$router.push({ path: '/device' });
    delete this.bloc.sortDevice.id;
    this.bloc
      .getDeviceModel(
        this.bloc.modelPage.pageIndex,
        this.bloc.modelPage.pageSize,
        'DESC',
        undefined,
        undefined,
        undefined
      )
      .then((res) => {
        this.bloc.getAllSort(1, 1000, 'ASC');
      });
  }

  add = false;
  edit: any = false;
  addCategory: any = false;
  sort: any = {
    id: 0,
    sortName: '',
    sortIcon: ''
  };
  sort1: any = {
    id: 0,
    sortName1: '',
    sortIcon1: ''
  };

  // menuIconList: string[] = ['md-create', 'md-trash', 'md-arrow-down'];

  menuIconList = [
    {
      name: 'md-create',
      resource: this.Validation.check(this.Resources.DEVICE_SORT_UPDATE)
    },
    {
      name: 'md-trash',
      resource: this.Validation.check(this.Resources.DEVICE_SORT_DELETE)
    },
    { name: 'md-arrow-down', resource: true },
    { name: 'md-arrow-up', resource: true }
  ];
  menuIcons = this.menuIconList
    .filter((item) => item.resource)
    .map((item) => item.name);

  editItem(dataItem: DeviceModel | null) {
    const id = this.bloc.sortDevice.id + '';
    dataItem
      ? this.$router.push({
          path: `/device/nav/edit/${dataItem.id}`,
          query: { sortId: id }
        })
      : this.$router.push({ path: '/device/add', query: { sortId: id } });
  }
    imgUrl = '';
    visible = false;
    imgUrl1 = '';
    visible1 = false;
    get fileList() {
        return this.bloc.fileList.map(x => {
            return {'name': 'name', 'sortIcon': x, 'status': 'finished'};
        });
    }
    get fileList1() {
        return this.bloc.fileList1.map(x => {
            return {'name': 'name', 'sortIcon': x, 'status': 'finished'};
        });
    }
    get uploadHeaders() {
        return {
            'Authorization': 'Bearer ' + store.state.auth.accessToken
        }
    };

    get uploadAction() {
        return `${baseUrl}/api/upload/image`
    }

    handleView(url) {
        this.imgUrl = url;
        this.visible = true;
    }
    handleView1(url) {
        this.imgUrl1 = url;
        this.visible1 = true;
    }
    handleRemove(file) {
        this.bloc.fileList.splice(this.bloc.fileList.indexOf(file), 1);
        this.sort.sortIcon = null;
    }
    handleRemove1(file) {
        this.bloc.fileList1.splice(this.bloc.fileList1.indexOf(file), 1);
        this.sort1.sortIcon1 = null;
    }
    handleSuccess(res, file) {
        this.sort.sortIcon = res.data[0];
        if (this.bloc.fileList.length > 0) {
            this.bloc.fileList = []
        }
        this.bloc.fileList.push(this.sort.sortIcon)
    }
    handleSuccess1(res, file) {
        this.sort1.sortIcon1 = res.data[0]
        if (this.bloc.fileList1.length > 0) {
            this.bloc.fileList1 = []
        }
        this.bloc.fileList1.push(this.sort1.sortIcon1)
    }
    handleFormatError1(file) {
        this.$Message.error('请选择格式为JPG、PNG格式的文件')
    }
    handleMaxSize1(file) {
        this.$Message.error('图片大小不能超过50k')
    }
  $refs!: {
    sort: HTMLFormElement;
    editSort: HTMLFormElement;
    save: AppButton;
    edit: AppButton;
  };

  handleSubmit(name) {
    this.$refs[name].validate((valid) => {
      if (valid) {
        this.$Message.success('Success!');
      } else {
        this.$Message.error('Fail!');
      }
    });
  }

  // 删除型号
  toRemoveItem(item) {
    this.bloc.modelPut.id = item.id;
    // this.modelDelete = true
    this.bloc.model.id = item.id;
    this.$Modal.confirm({
      title: '提示',
      content: '确认删除后将无法恢复！还要继续吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        this.bloc
          .deleteModel(this.bloc.model.id)
          .then((res) => {
            if (res.name === '') {
              this.$Message.success('设备型号删除成功');
              this.bloc.getDeviceModel(
                this.bloc.modelPage.pageIndex,
                this.bloc.modelPage.pageSize,
                'DESC',
                this.bloc.sortDevice.id,
                undefined,
                this.bloc.model.modelName
              );
            } else {
              this.$Message.error('设备型号删除失败');
            }
          })
          .catch((res) => {
            this.$Message.error(res.message);
          })
          .finally(() => {});
      }
    });
  }

  modelDele(id) {
    this.bloc
      .deleteModel(id)
      .then((res) => {
        if (res.name === '') {
          this.$Message.success('设备型号删除成功');
          this.bloc.getDeviceModel(
            this.bloc.modelPage.pageIndex,
            this.bloc.modelPage.pageSize,
            'DESC',
            this.bloc.sortDevice.id,
            undefined,
            this.bloc.model.modelName
          );
        } else {
          this.$Message.error('设备型号删除失败');
        }
      })
      .catch((res) => {
        this.$Message.error(res.message);
      })
      .finally(() => {});
  }

  selectCurrentMenu(val, idx) {
    this.AllSort = false;
    this.bloc.currentIdx = idx;
    this.bloc.sortDevice = val;
    this.bloc.model.sortId = val.id;
    this.bloc.getDeviceModel(
      1,
      this.bloc.modelPage.pageSize,
      'DESC',
      this.bloc.sortDevice.id,
      undefined,
      this.bloc.model.modelName
    );
    this.changeRoute();
  }

  handleSort(icon: string, item: DeviceSort) {
    if (icon === 'md-create') this.handleEdit(item);
    if (icon === 'md-trash') {
      this.handleDelete(item);
    }
    if (icon === 'md-arrow-down') {
      this.bloc.getAllSort(1, 1000, 'ASC').then((res) => {
        let sortIdS = res.map((item) => {
          return item.id;
        });
        let index = sortIdS.findIndex((sortId) => {
          return sortId === item.id;
        });
        if (index < sortIdS.length - 1) {
          let sortId = sortIdS[index];
          sortIdS[index] = sortIdS[index + 1];
          sortIdS[index + 1] = sortId;
          this.bloc.putDeviceSortSort(sortIdS).then((res) => {
            this.$Message.success('下移成功');
            this.initTreeList();
          });
        } else {
          this.$Message.success('已经是最底部了');
        }
      });
    }
    if (icon === 'md-arrow-up') {
      this.bloc.getAllSort(1, 1000, 'ASC').then((res) => {
        let sortIdS = res.map((item) => {
          return item.id;
        });
        let index = sortIdS.findIndex((sortId) => {
          return sortId === item.id;
        });
        if (index > 0) {
          let sortId = sortIdS[index];
          sortIdS[index] = sortIdS[index - 1];
          sortIdS[index - 1] = sortId;
          this.bloc.putDeviceSortSort(sortIdS).then((res) => {
            this.$Message.success('上移成功');
            this.initTreeList();
          });
        } else {
          this.$Message.success('已经是最顶部了');
        }
      });
    }
  }

  // 新增分类方法
  handleAdd(item) {
    this.addCategory = true;
    this.sort.sortName = '';
    this.sort.sortIcon = '';
  }

  addSort(sortName, sortIcon) {
        this.$refs.sort.validate((valid) => {
            if (valid) {
                this.$refs.save.bloc.loading = true;
                this.bloc
                    .addSort(sortName, sortIcon)
                    .then((res) => {
                        this.addCategory = false;
                        this.initTreeList();
                        this.$Message.success('新增成功');
                        // this.$refs.save.bloc.loading = false;
                    })
                    .catch((res) => {
                        setTimeout(() => {
                            this.$Message.error('新增失败');
                        }, 1500);
                    })
                    .finally(() => {
                        setTimeout(() => {
                            this.$refs.save.bloc.loading = false;
                        }, 3000);
                    });
            }
        });
    }

  // 编辑分类
  handleEdit(item) {
      this.edit = true;
      this.sort1.sortIcon1 = item.sortIcon;
      this.bloc.fileList1 = [];
      this.bloc.fileList1.push(this.sort1.sortIcon1);
      this.sort1.id = item.id;
      this.sort1.sortName1 = item.sortName;
  }

  editSorts(id, sortName, sortIcon) {
        this.$refs.editSort.validate((valid) => {
            if (valid) {
                this.$refs.edit.bloc.loading = true;
                this.bloc
                    .editSort(id, sortName, sortIcon)
                    .then((res) => {
                        this.edit = false;
                        this.$Message.success('编辑设备成功');
                        this.initTreeList();
                    })
                    .catch((res) => {
                        setTimeout(() => {
                            this.$Message.error('编辑设备失败');
                        }, 1500);
                    })
                    .finally(() => {
                        setTimeout(() => {
                            this.$refs.edit.bloc.loading = false;
                        }, 3000);
                    });
            }
        });
    }

  cancel() {
    this.$refs['sort'].resetFields();
    this.$refs['editSort'].resetFields();
  }

  // 删除分类
  handleDelete(item) {
    this.bloc.model.sortId = item.id;
    this.$Modal.confirm({
      title: '提示',
      content: '确认删除后将无法恢复！还要继续吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        this.bloc
          .deleteSort(this.bloc.model.sortId)
          .then((res) => {
            if (res.message !== 'SUCCESS') {
              this.$Message.error('设备分类删除失败');
            } else {
              this.$Message.success('设备分类删除成功');
              this.initTreeList();
            }
          })
          .catch((res) => {
            this.$Message.error('设备分类删除失败');
          })
          .finally(() => {});
      }
    });
  }

  handleDele(id) {}

  reset() {
    this.bloc.model = {
      id: 0,
      companyId: [],
      isFirmware: true,
      isSelfMotion: true,
      isSoftware: true,
      modelIcon: '',
      modelName: '',
      sortId: this.bloc.model.sortId,
      createTime: '',
      updateTime: ''
    };
    this.bloc.getDeviceModel(
      this.bloc.modelPage.pageIndex,
      this.bloc.modelPage.pageSize,
      'DESC',
      this.bloc.sortDevice.id,
      this.bloc.model.companyId,
      this.bloc.model.modelName
    );
  }
  changepages(val) {
    this.bloc.getDeviceModel(
      val,
      this.bloc.modelPage.pageSize,
      'DESC',
      this.bloc.sortDevice.id,
      this.bloc.model.companyId,
      this.bloc.model.modelName
    );
  }
  changepagesize(val) {
    this.bloc.modelPage.pageSize = val;
    this.bloc.getDeviceModel(
      1,
      this.bloc.modelPage.pageSize,
      'DESC',
      this.bloc.sortDevice.id,
      this.bloc.model.companyId,
      this.bloc.model.modelName
    );
  }

  initTreeList() {
    this.bloc
      .getAllSort(1, 1000, 'ASC')
      .then((res) => {
        // if (!this.bloc.sortDevice.id) {
        //   this.bloc.sortDevice.id = res.data.items[0].id;
        // }
        // this.changeRoute();
        this.bloc.model.sortId = this.bloc.sortDevice.id;
        this.bloc.getDeviceModel(
          this.bloc.modelPage.pageIndex,
          this.bloc.modelPage.pageSize,
          'DESC',
          this.bloc.sortDevice.id,
          undefined,
          undefined
        );
      })
      .finally(() => {});
  }

  changeRoute() {
    this.$router.push({
      path: '/device',
      query: { sortId: this.bloc.sortDevice.id + '' }
    });
  }

  // mounted() {
  //   this.bloc.getDeviceModel(1, 10, 'DESC', undefined)
  //   this.initTreeList()
  //   this.bloc.getCompany(this.bloc.company.pageIndex, this.bloc.company.pageSize, 'DESC')
  //   this.bloc.getAllSort(1, 1000, 'DESC')
  // }
}
</script>
<style lang="less" scoped>
.container {
  padding-top: 20px;
  background-color: rgba(255, 255, 255, 1);

  .tree {
    margin-left: 20px;
  }
}

.left {
  // min-height: 100%;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(242, 242, 242, 1);
  cursor: pointer;
}

.left .ivu-col-span-6 {
  display: block;
  margin-right: 60px;
  width: 18%;
  background-color: yellow;
}

.fade-enter-active {
  transition: all 0.3s ease;
}

.fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter,
.fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

.category {
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 1);
  height: 80px;
  border: 1px solid rgba(242, 242, 242, 1);
  padding: 20px 20px;
}
.tree-box {
  max-height: 780px;
  overflow-y: auto;
  border-bottom: 0.5px solid #f2f2f2;
}
.tree-menu {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 5px 20px;
  font-size: 14px;
  color: #999;

  label {
    padding: 0 10px 0 5px;
    width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.right {
  min-height: 600px;
  background-color: rgba(255, 255, 255, 1);
}

.head {
  padding-left: 20px;
  padding-top: 20px;
  text-align: left;
  height: 61px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
}

.head span > span {
  padding-top: 2px;
}

.ivu-tree {
  height: 100%;
}

.active-menu {
  color: #0079fe;
}

/deep/ .ivu-tree-arrow > .ivu-icon-ios-arrow-forward:before {
  content: "\f1d0" !important;
}

/deep/ .ivu-layout {
  background-color: rgba(255, 255, 255, 1);
}
</style>
